<template>
	<view class="container">

		<view class="orderArea">
			<!-- 显示状态部分 -->
			<view class="statusContent">
				<view class="textContent">
					{{getPickUpStatusText(orderInfo.serverUsersOutOrdersPayStatus)}}
				</view>
			</view>

			<view class="detailContent">


				<!-- 这里用子商品列表来渲染 -->
				<view class="goodDetail">
					<view class="goodsItem" v-for="goodsItem in orderInfo.outOrderDetailVos">
						<!-- 商品图片 -->
						<view class="imgContent">
							<image :src="goodsItem.ordersDetailProductDetailImg" mode="scaleToFill"></image>
						</view>
						<!-- 商品描述 -->
						<view class="descContent">
							<view class="mainDesc">
								<view class="mainGoodTitle">
									{{goodsItem.ordersProductName}}
								</view>
								<view class="priceAndNum">
									<view class="price">
										￥{{caluateDiscount(goodsItem.ordersDetailProductDetailPrice) }}
									</view>
									<view class="quantity">
										×{{goodsItem.ordersDetailNumber}}
									</view>
								</view>
							</view>
							<view class="additionDesc">
								{{goodsItem.ordersDetailProductDetailSpecifications}}
							</view>
						</view>
					</view>



					<view class="priceContent">


						<view class="deliverFee">
							<text>运费</text>
							<text class="deliver">
								￥{{Number(orderInfo.serverUsersOutOrdersTransportAmount).toFixed(2) }}
							</text>
						</view>

						<view class="realPrice">
							<text>{{(orderInfo.serverUsersOutOrdersPayStatus===0||orderInfo.serverUsersOutOrdersPayStatus===4)?'应付款':'实付款'}}</text>
							<text
								class="real">￥{{Number(orderInfo.serverUsersOutOrdersTransportAmount).toFixed(2)}}</text>
						</view>

					</view>

				</view>



				<view class="addressDetail">
					<view class="personInfo">
						<text>收货信息</text>
						<text class="info">{{orderInfo.serverAddressConsigneeNameAndPhone}}</text>
					</view>

					<view class="addressInfo">
						<text>收货地址</text>
						<view class="address">{{orderInfo.serverAddressConsigneeAddress}}</view>
					</view>

				</view>

				<!-- 快递单号根据订单状态 -->
				<view class="trackNumberDetail"
					v-if="orderInfo.serverUsersOutOrdersTransportNumber!=null&&orderInfo.serverUsersOutOrdersTransportNumber.length!=0">
					<view class="trackContent">
						<view class="title">
							快递单号
						</view>


						<view class="numArea">
							<view class="numItem" v-for="num in orderInfo.serverUsersOutOrdersTransportNumber">
								<text class="numBox">{{num}}</text>
								<text class="copy" @tap="copyText(num)">复制</text>
							</view>
						</view>



					</view>
				</view>



				<view class="referenceDetail">

					<view class="orderNum">
						<text class="num">订单编号:</text>
						<text>{{orderInfo.id}}</text>
					</view>

					<view class="orderTime">
						<text>创建时间:</text>
						<text class="time">{{orderInfo.serverUsersOutOrdersTime}}</text>
					</view>

					<view class="orderTime" v-if="orderInfo.serverUsersOutOrdersPayStatus===4">
						<text>取消时间:</text>
						<text class="time">{{orderInfo.serverUsersOutOrdersTime}}</text>
					</view>

					<!-- //根据订单状态动态显示 -->
					<view class="orderTime"
						v-if="orderInfo.serverUsersOutOrdersPayStatus!=0&&orderInfo.serverUsersOutOrdersPayStatus!=4">
						<text>付款时间:</text>
						<text class="time">{{orderInfo.serverUsersOutOrdersCheckoutTime}}</text>
					</view>

					<view class="orderTime" v-if="orderInfo.serverUsersOutOrdersPayStatus===3">
						<text>完成时间:</text>
						<text class="time">{{orderInfo.serverUsersOutOrdersFinishTime}}</text>
					</view>


					<!-- 这里判定有没有传入备注信息 -->
					<view class="remarkInfo" v-if="serverUsersOutOrdersRemark">
						<text style="margin-bottom: 100rpx;">备注:</text>
						<text class="remark">{{orderInfo.serverUsersOutOrdersRemark}}</text>
					</view>
				</view>

			</view>

		</view>

		<!-- 底部按钮栏 根据状态不同进行显示-->
		<view class="btnFoot">
			<view class="operateButtons">
				<view class="buttonPosition">
					<button type="default" class="detail" v-if="orderInfo.serverUsersOutOrdersPayStatus==0"
						@click="openConfirmCard(orderInfo.id,'确定要取消该订单吗',1)">取消订单</button>
					<button type="default" class="detail" v-if="orderInfo.serverUsersOutOrdersPayStatus==4"
						@click="openConfirmCard(orderInfo.id,'确定要删除该订单吗',2)">删除订单</button>
					<button type="default" class="confirm" v-if="orderInfo.serverUsersOutOrdersPayStatus==2"
						@click="openConfirmCard(orderInfo.id,'您确定要签收该订单吗',3)">去收货</button>
					<button type="default" class="confirm" v-if="orderInfo.serverUsersOutOrdersPayStatus==0"
						@click="toPayPickUp(orderInfo.id)">去支付</button>
				</view>
			</view>
		</view>

		<!-- 自己封装的弹出框 -->
		<confirmPop :isPopUp="confirmStatus" :title="operateTitle" @cancel="closeConfirmCard()"
			@confirm="handleConfirm()">
		</confirmPop>

		<view @click="closeConfirmCard()">
			<popMask :isShow="confirmStatus"></popMask>
		</view>

	</view>
</template>

<script>
	import * as payApi from '@/api/pay/pay.js'
	import * as serviceOrderApi from '@/api/serviceOrder/serviceOrder.js'
	import confirmPop from '@/components/confirmPop.vue'
	import popMask from '@/components/popMask.vue'
	let lastRequestTime = 0;
	const requestInterval = 1000; // 设置请求的最小间隔时间，例如1000毫秒
	export default {
		components: {
			confirmPop,
			popMask
		},
		data() {
			return {
				orderId: '',
				orderInfo: null,
				// 用来控制确认框的一些参数
				confirmStatus: false,
				//准备取消的订单Id
				operateId: null,
				operateTitle: null,
				operateFlag: null
			};
		},
		onLoad(options) {
			const paramsStr = options.params || null; // 获取URL查询参数中的params字段
			//从订单页传来的id
			if (paramsStr != null) {
				const receivedParams = JSON.parse(paramsStr);
				this.orderId = receivedParams.id;
				console.log(this.orderId)
				console.log("商品id")
				this.getOrderDetailByid(this.orderId)
			} else {

			}
		},
		methods: {
			// 计算折扣
			caluateDiscount(price) {


				if (this.$globalData.userType !== null) {

					if (this.$globalData.userType === 1) {
						return (0.5 * price).toFixed(2)
					} else {
						return (0.4 * price).toFixed(2)
					}
				}
			},
			//根据id查询订单信息
			async getOrderDetailByid(id) {
				const res = await serviceOrderApi.getPickListDetail(id);
				this.orderInfo = res.data.data;
				console.log("子商品信息")
				console.log(this.orderInfo)
			},
			// 复制快递单号方法
			copyText(text) {
				uni.$copyText(text)
			},
			//用来映射提货状态文字
			//用来根据后台传来的状态码显示不同的文字
			getPickUpStatusText(status) {
				switch (status) {
					case 0:
						return '待支付运费';
					case 1:
						return '待发货';
					case 2:
						return '待收货';
						// 其他状态码的情况...
					case 3:
						return '已完成';
					case 4:
						return '已取消';
					default:
						return '未知状态';
				}

			},

			openConfirmCard(id, title, flag) {
				this.operateId = id;
				this.operateTitle = title;
				this.operateFlag = flag;
				this.confirmStatus = true;
			},

			closeConfirmCard() {
				this.confirmStatus = false;
			},
			handleConfirm() {
				let flag = this.operateFlag;
				if (flag === 1) {
					this.cancelPickUpOrder(this.operateId);
				} else if (flag === 2) {
					this.deletePickUp(this.operateId);
				} else if (flag === 3) {
					this.goToReceiveGoods(this.operateId);
				}
				this.confirmStatus = false;
			},

			//对提货订单的一些操作
			// 取消提货订单
			async cancelPickUpOrder(id) {
				const res = await serviceOrderApi.cancelPickup({
					serverUserOutOrdersId: id,
					serverUserOutOrdersCancelReason: ""
				});
				console.log("取消提货订单");
				console.log(res)
				if (res.data.code === 200) {
					uni.$goBack()
				} else {
					return uni.$showMsg('取消订单失败')
				}

			},
			//删除订单
			async deletePickUp(id) {
				const currentTime = new Date().getTime();
				if (currentTime - lastRequestTime < requestInterval) {
					return uni.$showMsg('操作过于频繁'); // 这将阻止请求继续执行
				}
				lastRequestTime = currentTime; // 更新上一次请求时间
				const res = await serviceOrderApi.deletePickup(id);
				console.log(res)
				console.log("删除提货订单")
				if (res.data.code === 200) {
					uni.$goBack()
					return uni.$showMsg('删除成功')
				} else {
					return uni.$showMsg('删除失败')
				}
			},
			//去收货
			async goToReceiveGoods(id) {
				const currentTime = new Date().getTime();
				if (currentTime - lastRequestTime < requestInterval) {
					return uni.$showMsg('操作过于频繁'); // 这将阻止请求继续执行
				}
				lastRequestTime = currentTime; // 更新上一次请求时间
				const res = await serviceOrderApi.toReceiveGoods(id);
				console.log(res)
				console.log("提货订单收货")
				if (res.data.code === 200) {
					uni.$goBack()
					return uni.$showMsg('成功收货')
				} else {
					return uni.$showMsg('收货失败')
				}
			},
			//去支付
			async toPayPickUp(orderId) {
				const currentTime = new Date().getTime();
				if (currentTime - lastRequestTime < requestInterval) {
					return uni.$showMsg('操作过于频繁'); // 这将阻止请求继续执行
				}
				lastRequestTime = currentTime; // 更新上一次请求时间
				const res = await payApi.payCommssion(orderId);
				console.log("订单支付数据")
				console.log(res)
				if (res.data.code === 200) {
					let orderResponseData = res.data.data.stringStringMap;
					uni.$WxPay(orderResponseData).then(response => {
							// 支付成功的处理
							uni.$toPage('/subpkg/ServiceProvider/pickUpTansferPage/pickUpTansferPage')
						})
						.catch(error => {
							// 支付失败的处理
							uni.$showMsg('支付失败')

						});



				}
			},




		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 100vw;

		background: rgba(243, 243, 245, 1);

		.orderArea {
			box-sizing: border-box;
			width: 100vw;
			margin: 0;
			padding-bottom: 30rpx;
			height: calc(100vh - 160rpx);
			
			overflow: auto;
			
			.statusContent {
				width: 100%;
				height: 124rpx;
				display: flex;
				align-items: center;
				background: rgba(243, 243, 245, 1);

				.textContent {
					margin-left: 48rpx;
					color: rgba(179, 130, 75, 1);
					font-size: 40rpx;
					font-weight: 700;
				}

			}

			.detailContent {
				background: rgba(243, 243, 245, 1);
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 100%;
				padding-left: 28rpx;
				padding-right: 28rpx;
				margin-top: 30rpx;


				.goodDetail {
					border-radius: 10rpx;
					background: rgba(255, 255, 255, 1);
					width: 100%;

					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;


					.goodsItem {
						box-sizing: border-box;
						padding: 15rpx;
						padding-bottom: 5rpx;
						width: 100%;
						display: flex;
						align-items: center;
						display: flex;


						.imgContent {
							width: 158rpx;
							height: 152rpx;
							border-radius: 8rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 158rpx;
								height: 152rpx;
								border-radius: 8rpx;
							}

						}

						.descContent {

							margin-left: 20rpx;

							.mainDesc {


								width: 500rpx;
								display: flex;
								justify-content: space-between;

								.mainGoodTitle {
									font-size: 32rpx;
									width: 320rpx;
								}

								.priceAndNum {

									margin-right: 12rpx;
									display: flex;
									flex-direction: column;
									text-align: right;

									.price {

										text-align: right;
										font-size: 32rpx;
										color: rgba(0, 0, 0, 1);
									}

									.quantity {

										color: rgba(128, 128, 128, 1);
										font-size: 24rpx;
										text-align: right;
									}

								}


							}

							.additionDesc {
								margin-top: 15rpx;
								color: rgba(128, 128, 128, 1);
								font-size: 24rpx;
							}
						}

					}

					.priceContent {
						margin-top: 20rpx;
						width: 100%;
						display: flex;
						margin-bottom: 32rpx;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						text {
							font-size: 28rpx;
							color: rgba(105, 105, 105, 1);
						}

						.totalPrice {
							width: calc(100% - 40rpx);
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							font-size: 24rpx;
							color: rgba(0, 0, 0, 1);
							box-sizing: border-box;
							margin-bottom: 20rpx;

							.total {}
						}

						.deliverFee {
							width: calc(100% - 40rpx);
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							box-sizing: border-box;
							margin-bottom: 20rpx;

							.deliver {
								font-weight: 500;
								color: rgba(0, 0, 0, 1);
								font-size: 24rpx;
							}
						}

						.realPrice {
							box-sizing: border-box;
							margin-top: 0rpx;
							width: calc(100% - 40rpx);
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							color: rgba(212, 48, 48, 1);
							font-size: 20rpx;
							font-weight: 500;

							.real {
								color: rgba(212, 48, 48, 1);
								font-size: 32rpx;
								font-weight: 500;
							}
						}
					}



				}

				.addressDetail {
					border-radius: 10rpx;
					background: rgba(255, 255, 255, 1);
					box-sizing: border-box;
					width: 100%;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;

					.personInfo {
						box-sizing: border-box;
						width: calc(100% - 40rpx);
						display: flex;
						margin-top: 20rpx;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;

						.info {
							color: rgba(0, 0, 0, 1);
							font-size: 28rpx;
						}

						text {
							font-size: 28rpx;
							color: rgba(105, 105, 105, 1);
						}
					}

					.addressInfo {

						position: relative;

						box-sizing: border-box;
						width: calc(100% - 40rpx);
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						// align-items: center;
						margin-top: 14rpx;
						margin-bottom: 20rpx;

						text {

							font-size: 28rpx;
							color: rgba(105, 105, 105, 1);
						}

						.address {
							max-width: 390rpx;
							margin-top: 5rpx;
							box-sizing: border-box;
							font-size: 24rpx;
							color: rgba(0, 0, 0, 1);
							font-weight: 400;
							font-size: 24rpx;
						}
					}

				}

				// 快递单号板块
				.trackNumberDetail {
					padding-top: 10rpx;
					padding-bottom: 10rpx;
					border-radius: 10rpx;
					background: rgba(255, 255, 255, 1);
					box-sizing: border-box;
					width: 100%;
					margin-bottom: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					position: relative;

					.trackContent {
						.title {}

						height: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: calc(100% - 40rpx);
						color: rgba(85, 85, 87, 1);
						font-size: 28rpx;


						.numArea {


							.numItem {

								.numBox {
									position: absolute;
									right: 102rpx;
								}

								.copy {
									color: rgba(223, 161, 60, 1);
								}
							}
						}



					}
				}

				.referenceDetail {
					border-radius: 10rpx;
					background: rgba(255, 255, 255, 1);
					width: 100%;
					margin-bottom: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;


					.orderNum {
						width: calc(100% - 40rpx);
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10rpx;
						margin-top: 20rpx;

						.num {
							color: rgba(85, 85, 87, 1);
							font-size: 28rpx;
						}

						text {
							font-size: 28rpx;
							color: rgba(105, 105, 105, 1);
						}
					}

					.orderTime {
						width: calc(100% - 40rpx);
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10rpx;

						.time {
							font-size: 28rpx;
							color: rgba(85, 85, 87, 1);
						}

						text {
							font-size: 28rpx;
							color: rgba(105, 105, 105, 1);
						}
					}

					.remarkInfo {
						width: calc(100% - 40rpx);
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;

						text {
							font-size: 28rpx;
							color: rgba(105, 105, 105, 1);
						}

						.remark {

							margin-top: -15rpx;
							width: 570rpx;
							height: 122rpx;
							color: rgba(85, 85, 87, 1);
						}
					}
				}


			}

		}

		// 按钮组

		.btnFoot {
			position: fixed;
			bottom: 0;
			width: 100vw;
			height: 160rpx;
			padding-right: 48rpx;
			background: rgba(255, 255, 255, 1);

			.operateButtons {


				padding-right: 0;
				margin-top: 20rpx;
				position: relative;
				height: 54rpx;

				.buttonPosition {

					position: absolute;
					right: 0rpx;
					display: flex;
				}


				button {
					margin-left: 30rpx;
					box-sizing: border-box;
					font-size: 24rpx;
					font-weight: 400;
					height: 54rpx;
					opacity: 1;
					border-radius: 26rpx;
					display: flex;
					width: 160rpx;
					align-items: center;
					justify-content: center;
					line-height: 36rpx;
				}

				.confirm {

					color: rgba(255, 255, 255, 1);
					background: rgba(196, 143, 82, 1);
					border: 1rpx rgba(196, 143, 82, 1);
				}

				.detail {
					color: rgba(0, 0, 0, 1);
					border: 1rpx solid rgba(85, 85, 87, 1);

				}
			}

		}

	}
</style>